<!--
Copyright (C) 2024 Checkmk GmbH - License: GNU General Public License v2
This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
conditions defined in the file COPYING, which is part of this source code package.
-->
<script setup lang="ts">
import { type AgentSlideout } from 'cmk-shared-typing/typescript/agent_slideout'
import { TooltipArrow } from 'radix-vue'
import { ref } from 'vue'

import CmkDialog from '@/components/CmkDialog.vue'
import CmkSlideInDialog from '@/components/CmkSlideInDialog.vue'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/tooltip'

import AgentSlideOutContent from '@/mode-host/agent-connection-test/components/AgentSlideOutContent.vue'

interface Props {
  dialogTitle: string
  dialogMessage: string
  slideInTitle: string
  slideInButtonTitle: string
  docsButtonTitle: string
  closeButtonTitle: string
  agentSlideout: AgentSlideout
  allAgentsUrl: string
  isNotRegistered: boolean
}

defineProps<Props>()

const slideInOpen = ref(false)

const openDocs = () => {
  window.open('https://docs.checkmk.com/latest/en/wato_monitoringagents.html#agents', '_blank')
}

const tooltipOpen = ref(true)
</script>

<template>
  <TooltipProvider>
    <Tooltip :open="tooltipOpen" class="tooltip">
      <TooltipTrigger as="span"></TooltipTrigger>
      <TooltipContent align="center" side="right" :avoid-collisions="false" class="tooltip-content">
        <TooltipArrow
          :style="{ fill: 'var(--default-help-icon-bg-color)' }"
          :width="6"
          :height="6"
        />
        <!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
        <button class="tooltip-close" @click.prevent="tooltipOpen = false">×</button>
        <CmkDialog
          :title="dialogTitle"
          :message="dialogMessage"
          :buttons="[
            {
              title: slideInButtonTitle,
              onclick: () => {
                slideInOpen = true
              },
              variant: 'info'
            },
            {
              title: docsButtonTitle,
              onclick: () => {
                openDocs()
              },
              variant: 'optional'
            }
          ]"
          class="agent-download-dialog__dialog"
        />
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
  <CmkSlideInDialog
    :open="slideInOpen"
    :header="{ title: slideInTitle, closeButton: true }"
    @close="slideInOpen = false"
  >
    <AgentSlideOutContent
      :all-agents-url="allAgentsUrl"
      :host-name="agentSlideout.host_name"
      :agent-install-cmds="agentSlideout.agent_install_cmds"
      :agent-registration-cmds="agentSlideout.agent_registration_cmds"
      :legacy-agent-url="agentSlideout.legacy_agent_url"
      :close-button-title="closeButtonTitle"
      :save-host="agentSlideout.save_host"
      :agent-installed="isNotRegistered"
      :is-push-mode="false"
      @close="((slideInOpen = false), (tooltipOpen = false))"
    />
  </CmkSlideInDialog>
</template>

<style scoped>
.agent-download-dialog__dialog {
  margin: 0 !important;
}

.tooltip-close {
  position: absolute;
  top: 2px;
  right: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
</style>
